<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const info = ref({});
const quota = ref({});
//获取用户信息
async function getInfo() {
    info.value = await BaiduPan("info")
}
//获取用户信息
async function getQuota() {
    quota.value = await BaiduPan("quota")
}

onMounted(() => {
    getInfo();
    getQuota();
});

/** 菜单选择 */
function handleMenu(e) {
    if (e == "1-1") { //合并pdf文档
        ElMessageBox.prompt('请输入pdf所在的目录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }).then(async ({ value }) => {
            await pdfMerger(value);
            ElMessage({
                type: 'success',
                message: `合并完成 合并的pdf请到程序目录找`,
            })
        });
    }
}

</script>

<template>
    <div class="avatar">
        <el-menu :default-active="1" @select="handleMenu" mode="horizontal" :ellipsis="false">
            <el-sub-menu index="1">
                <template #title>工具</template>
                <el-menu-item index="1-1">合并PDF</el-menu-item>
            </el-sub-menu>
        </el-menu>
        <img :src="info.avatar_url" />
        <el-tooltip
            :content="'空间：' + (quota.used / (1024 * 1024 * 1024)).toFixed(4) + 'G/' + (quota.total / (1024 * 1024 * 1024)).toFixed(1) + 'G'">{{
                info.baidu_name }}</el-tooltip>
    </div>
</template>

<style scoped>
.avatar {
    display: flex;
    align-items: center;
}

.avatar img {
    width: 26px;
    border-radius: 50%;
}
</style>
